<script setup lang="ts">
const intoImgDetail = (imgId) => {
  uni.navigateTo({
    url: '/pages/img-detail/img-detail',
  })
}
</script>
<template>
  <view class="w-full h-full">
    <view class="h-screen">
      <wd-grid :gutter="10" :column="3">
        <wd-grid-item
          class="grid-item-box"
          v-for="item in 4"
          icon="picture"
          @click="intoImgDetail"
          use-slot
          text="文字"
        >
          <!--          点击图片后跳转详情页-->
          <wd-img
            class="img"
            src="https://ts3.cn.mm.bing.net/th?id=ORMS.946cd5d7aa398c656010cf5b8edcf1dc&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=0.8999999761581421&p=0"
          />
        </wd-grid-item>
      </wd-grid>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.grid-item-box {
  width: 100%;
  height: 100%;

  :deep(.wd-grid-item grid-item-box) {
    margin: 0rpx;
  }

  .img {
    width: 100%;
    height: 90px;
    border-radius: 16rpx;
  }
}

:deep(.wd-grid-item__content) {
  padding: 0 !important;
}
</style>
